<template>
	<view class="px-10">
		<view class="pt-5">
			<view class="pb-5">
				<u--form :model="userInfo" :rules="rules" ref="uForm" labelPosition="left">
					<!-- Name Input -->
					<u-form-item label="姓 名" prop="name" :labelWidth="labelClass">
						<u--input v-model="userInfo.name" placeholder="请输入姓名"></u--input>
					</u-form-item>

					<!-- Phone Input -->
					<u-form-item label="电 话" prop="phone" :labelWidth="labelClass">
						<u--input v-model="userInfo.phone" maxlength="11" type="number" placeholder="请输入电话"></u--input>
					</u-form-item>
					<u-form-item label="年 龄" prop="age" :labelWidth="labelClass">
						<u--input v-model="userInfo.age" maxlength="2" type="number" placeholder="请输入年龄"></u--input>
					</u-form-item>
					<!-- Gender Selection -->
					<u-form-item label="性 别" prop="sex" label-width="100px" :labelWidth="labelClass">
							  <u-radio-group
							    v-model="userInfo.sex"
							    placement="row"
							  >
							    <u-radio 
							      :customStyle="{marginTop: '3px',marginRight:'20px'}"
							      v-for="(item, index) in genders"
							      :key="index"
							      :label="item.name"
							      :name="item.val"
							    >
							    </u-radio>
								</u-radio-group>
					</u-form-item>

					<!-- Education Selection -->
					<u-form-item label="学 历" prop="education" :labelWidth="labelClass">
						<view class="ba_jy po-r">
							
							<view class="po-a widz" @click="showEducation = true">
								
							</view>
							<u--input v-model="userInfo.education" placeholder="请选择学历"
								></u--input>
						</view>
						<view>
							<u-picker v-model="userInfo.education" placeholder="请选择学历" :show="showEducation"
								:columns="educations" @cancel="showEducation=false" @confirm="edConfirm"></u-picker>
						</view>
					</u-form-item>

					<!-- Salary Input -->
					<u-form-item label="年 薪" prop="salary" :labelWidth="labelClass">
						<u--input v-model="userInfo.salary" type="number" placeholder="请输入年薪"></u--input>
					</u-form-item>

					<!-- Company Input -->
					<u-form-item label="单 位" prop="company" :labelWidth="labelClass">
						<u--input v-model="userInfo.company" placeholder="请输入工作单位"></u--input>
					</u-form-item>

					<!-- Photo Upload -->

					<u-form-item label="生活照" prop="photo" :labelWidth="labelClass">
						<yupload v-model="userInfo.photo"></yupload>
				
					</u-form-item>

					<!-- Introduction Textarea -->
					<u-form-item label="简 介" prop="introduction" :labelWidth="labelClass">
						<u--textarea v-model="userInfo.introduction" placeholder="请输入简介"></u--textarea>
					</u-form-item>
				</u--form>
				<u-button type="primary" @click="submitForm" :disabled="buttonType">提交</u-button>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		to,
		msg,
		get,
		jsonParIfy
	} from "@/static/js/uilt/index.js";
	import {
		signUp
	} from "@/static/js/api/hemo.js"
	export default {
		data() {
			return {
				buttonType:false,
				// genderShow: false, // 控制性别选择器的显示状态
				showEducation: false, // 控制学历选择器的显示状态
				fileList: [],
				userInfo: {
					name: '', // 用户姓名
					phone: '', // 用户电话
					sex: 1, // 用户性别
					introduction: '', // 用户简介
					education: '', // 用户学历
					company: '', // 用户工作单位
					salary: '', // 用户年薪
					age:"",
					photo: [], // 用户上传的照片
				},
				genders: [
					{name:"男",val:1},
					{name:"女",val:0},
					// ['男', '女', ] // 性别选项
				],
				educations: [
					['高中', '大专', '本科', '研究生及以上'] // 学历选项
				],
				fileList: [], // 存储上传文件的列表
				rules: {
					name: {
						required: true, // 姓名字段必填
						message: '请填写姓名', // 验证失败提示信息
						trigger: 'blur' // 失去焦点时触发验证
					},
					phone: {
						type: 'string',
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change'],
						min: 11,
						max: 11
					},
					age: {
						required: true,
						message: "请输入年龄",
						trigger: 'blur'
					},
					
					introduction: {
						required: false // 简介字段非必填
					},
					education: {
						required: true, // 学历字段必填
						message: '请选择学历',
						trigger: 'change'
					},
					company: {
						required: true, // 工作单位字段必填
						message: '请填写工作单位',
						trigger: 'blur'
					},
					salary: {
						required: true, // 年薪字段必填
						message: '请填写年薪',
						trigger: 'blur'
					},
					// photo: {
					// 	required: true, // 照片上传字段必填
					// 	message: '请上传生活照',
					// 	trigger: 'change'
					// }
				},
				labelClass: 50 // 设置label的样式类
			};
		},
		onShow() {
			let userInfo = get('userInfo')
			if (!userInfo) return to('/pages/index/index')
		},
		watch:{
			
		},
		methods: {
			
			edConfirm(e) {
				// console.log(e.value);
				let userInfo = jsonParIfy(this.userInfo)
				userInfo.education = e.value[0]; // 确认选择的学历
				this.userInfo = userInfo
				this.showEducation = false; // 隐藏学历选择器
			},
			confirm(e) {
				this.userInfo.gender = e.value[0]; // 确认选择的性别
				// this.genderShow = false; // 隐藏性别选择器
			},
		
			async submitForm() {
				this.buttonType = true
				const isValid = await this.$refs.uForm.validate();
				if (!isValid) return
				let userInfo = this.userInfo
				let use = get('userInfo')
				userInfo.uid = use.id 
				let res = await signUp(userInfo)
				this.buttonType = false
				if(res.code != 100)return
				to('/pages/choice/choice')
			},
			
		}
	};
</script>

<style lang="scss" scoped>
	.custom-label {}
	.ba_jy{
		// border: 1px solid red;
		width: 100%;
		.widz{
			width: 100%;
			height: 40px;
			background-color: red;
			z-index: 99999999;
			opacity: 0;
		}
	}
	
</style>